<template>
	<div v-show="show" class="to-top-container" @click="handleScrollTop">TOP</div>
</template>

<script>
import eventBus from "@/eventBus";
export default {
	data() {
		return {
			show: false,
		};
	},
	mounted() {
		eventBus.$on("mainScroll", this.handleScroll);
	},
	methods: {
		handleScroll(dom) {
			if (!dom) {
				this.show = false;
				return;
			}
			this.show = dom.scrollTop >= 500;
		},
		handleScrollTop() {
			eventBus.$emit("setScrollTop", 0);
		},
	},
	beforeDestroy() {
		eventBus.$off("mainScroll", this.handleScroll);
	},
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.to-top-container {
	position: fixed;
	width: 50px;
	height: 50px;
	right: 50px;
	bottom: 50px;
	border-radius: 50%;
	background-color: @primary;
	color: #fff;
	line-height: 50px;
	text-align: center;
	cursor: pointer;
}
</style>
